import { useNavigate } from "react-router-dom";
import { useState, useEffect, useMemo } from "react";
import { StatisticsHeader } from "./components/header";
import { Ranking } from "./components/ranking";
import { TotalCard } from "./components/totalCard";
import Footer from "../../components/footer";
import orderIcon from "@/assets/images/order.png";
import navBarIcon from "@/assets/images/nav_bar.png";
import { savingMoney, savingMoneyOrderList } from "@/api/paycode";

import "./index.less";

function Statistics() {
  const navigate = useNavigate();
  const [savingMoneyData, setSavingMoneyData] = useState({});
  const [rankingData, setRankingData] = useState([]);

  const onGetSavingMoney = () => {
    savingMoney().then((res) => {
      setSavingMoneyData(res?.data || []);
    });
  };

  const onGetRankingData = () => {
    savingMoneyOrderList().then((res) => {
      setRankingData(res?.data || []);
    });
  };

  useEffect(() => {
    onGetSavingMoney();
    onGetRankingData();
  }, []);

  return (
    <div className="statistics-page">
      <div className="statistics-content">
        {/* header */}
        <StatisticsHeader />
        {/* 排行榜 */}
        <TotalCard
          dataSource={savingMoneyData?.orderInfo || {}}
          orderStatistics={savingMoneyData?.orderStatistics || []}
          days={savingMoneyData?.days || 0}
        />
        {/* 排行榜组件 */}
        <Ranking data={rankingData} />
      </div>

      <Footer>
        <div className="bottom-nav">
          <div
            className="nav-item"
            onClick={() => {
              navigate("/paycode", { replace: true });
            }}
          >
            <div className="nav-icon">
              <img src={navBarIcon} width={40} height={40} alt="" />
            </div>
            <span>一码付</span>
          </div>
          <div className="nav-item active">
            <div
              className="nav-icon"
              onClick={() => {
                navigate("/orders");
              }}
            >
              <img src={orderIcon} width={40} height={40} alt="省钱账单" />
            </div>
            <span>省钱账单</span>
          </div>
        </div>
        /
      </Footer>
    </div>
  );
}

export default Statistics;
